<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title" id="city">地点</h1>
		</header>
	<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
	<div id="slider" class="mui-slider" >
	  <div class="mui-slider-group mui-slider-loop">
	    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
	    <div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="#">
	        <img src="img/4.jpg">
	      </a>
	    </div>
	    <!-- 第一张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/5.jpg" class="aa">
	      </a>
	    </div>
	    <!-- 第二张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/2.jpg" class="aa">
	      </a>
	    </div>
	    <!-- 第三张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/3.jpg" class="aa">
	      </a>
	    </div>
	    <!-- 第四张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="img/4.jpg" class="aa">
	      </a>
	    </div>
	    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
	    <div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="#">
	        <img src="img/5.jpg" class="aa">
	      </a>
	    </div>
	  </div>
	  <div class="mui-slider-indicator">
	    <div class="mui-indicator mui-active"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	  </div>
	</div>
	<ul class="mui-table-view">
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/1.jpg">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/2.jpg">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/3.jpg">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	    </li>
	     <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/4.jpg">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/5.jpg">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/1.jpg">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	    </li>
	     <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/2.jpg">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/3.jpg">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/4.jpg">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	    </li>
	     <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/5.jpg">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/1.jpg">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/2.jpg">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	    </li>
	     <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/3.jpg">
	            <div class="mui-media-body">
	                幸福
	                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/4.jpg">
	            <div class="mui-media-body">
	                木屋
	                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
	            </div>
	        </a>
	    </li>
	    <li class="mui-table-view-cell mui-media">
	        <a href="javascript:;">
	            <img class="mui-media-object mui-pull-left" src="img/5.jpg">
	            <div class="mui-media-body">
	                CBD
	                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
	            </div>
	        </a>
	        </li>
	</ul>
	</div>
<script>
mui.init({
		  pullRefresh : {
		    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		    down : {
		      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
		      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
		      height:'50px',//可选,默认50px.下拉刷新控件的高度,
		      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
		      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
		      callback :function(){
		      	plus.geolocation.getCurrentPosition(function(m){
   	
   	
			   	city.innerHTML = m.address.city;
			   	
			   	plus.contacts.getAddressBook( 0, function(res){
			   			
			   		res.find( null, function(res){
			   			//alert(JSON.stringify(res))
			   		});
			   		
			   	});
			   	
			   	
			   });
		      	mui('#refreshContainer').pullRefresh().endPulldown();
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    },
		    up : {
		      height:50,//可选.默认50.触发上拉加载拖动距离
		      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		      callback :function(){
		      	for(var i=1;i<6;i++){
		      			let oLi = document.createElement("li");
		      	oLi.className = "mui-table-view-cell mui-media";
		      	oLi.innerHTML =   '<a href="javascript:;">'+
	            '<img class="mui-media-object mui-pull-left" src="img/'+i+'.jpg">'+
	            '<div class="mui-media-body">'+
	                'ww'+
	                '<p class="mui-ellipsis">'+'想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.'+'</p>'+
	            '</div>'+
	        '</a>'
	        let oUl =  document.querySelector('.mui-table-view');
	         oUl.appendChild(oLi);
		      	}
		      
	       
	        
		      	this.endPullupToRefresh(true);
		      } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		    }
		  }
		});
    </script>
	</body>

</html>